<template>
  <div class="webchat_con_sened_msg" ref="webchatSendMsg">
    <div class="send_chat_msg" v-if="tabType === 'webchat_todo'">
      <el-popover popper-class="emoji"  v-if="tabType === 'webchat_todo'" ref="popover3" placement="top" width="500" trigger="click" v-model="faceVisible" :offset="-230">
        <el-tabs  v-model="activeName" type="border-card" @tab-click="handleClick"  tab-position="bottom">
          <el-tab-pane  name="first">
            <span slot="label"><img src="/img/emoji/smile.png" style="height: 16px;width: 16px;position: relative;top: 3px;" alt=""/>
            </span>
            <emoji-face @setEmojiFace="emojiFaceData" @></emoji-face>
          </el-tab-pane>
          <el-tab-pane   name="second">
            <span slot="label" class="textGradient"><i class="iconfont icon-shoucang"></i> </span>
            <emoticion ref="emoticon"  @sendimg="handleSubmit" @initialization="initUploadWebchatImg2"></emoticion>
          </el-tab-pane>
        </el-tabs>

      </el-popover>
      <el-popover v-if="tabType === 'webchat_todo'" ref="popover5" :disabled="!popover5Show" placement="top" width="180">
        <p>您未安装共享插件，请
          <a class="colorgreen cursorpointer" href="https://fs-im-package.7moor.com/Screensharing-utility_v1.0.1.crx.zip" download target="_blank">下载
          </a>并安装，点击查看
          <span class="colorgreen cursorpointer" @click="shareInstallDesc">安装说明</span></p>
      </el-popover>
      <el-popover v-if="tabType === 'webchat_todo'" :append-to-body="false"  ref="popover6" placement="right" width="180" :disabled="!captureInstallcheck">
        <p>
          如您未安装截屏插件，请
          <a target="_blank" href="https://fs-im-package.7moor.com/CaptureInstall.exe">下载</a>并安装,安装后请重新
          <a @click="reloadFun" style="color:#459ae9">刷新</a>使用
        </p>
      </el-popover>
      <!-- 工具栏开始 -->
      <el-popover v-if="tabType === 'webchat_todo'" popper-class="expandLayoutSendMsg"  ref="popover7" trigger="click" placement="top" width="30">
      <el-dropdown trigger="click" class="" @command="changeFont" size="small" >
            <span class="el-dropdown-link">
              <i class="icon icon-font iconfont" style="margin-bottom: 0!important;"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="fontSize">
              <el-dropdown-item :class="chatMsgCon.font === 'font12' ? 'active' : ''" command="12">12</el-dropdown-item>
              <el-dropdown-item :class="chatMsgCon.font === 'font14' ? 'active' : ''" command="14">14</el-dropdown-item>
              <el-dropdown-item :class="chatMsgCon.font === 'font16' ? 'active' : ''" command="16">16</el-dropdown-item>
              <el-dropdown-item :class="chatMsgCon.font === 'font18' ? 'active' : ''" command="18">18</el-dropdown-item>
              <el-dropdown-item :class="chatMsgCon.font === 'font20' ? 'active' : ''" command="20">20</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        <el-tooltip class="item" effect="dark"   :content="userAgent ? $t('webchat.capture') : $t('webchat.captureError')" v-show="expandLayout" placement="right">
            <el-popover
              placement="right"
              width="400"
              trigger="click">
              <p>
                如您未安装截屏插件，请
                <a target="_blank" href="https://fs-im-package.7moor.com/CaptureInstall.exe">下载</a>并安装,安装后请重新
                <a @click="reloadFun" style="color:#459ae9">刷新</a>使用
              </p>
               <i  slot="reference" class="msg_do icon-jietu iconfont" :class="userAgent ? '' : 'icon_disabled'" @click.stop="StartCapture"></i>
            </el-popover>

        </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="$t('webchat.knowledgeSearch')" placement="right">
          <i class="msg_do iconfont icon-zhishikujiansuo" v-show="expandLayout" @click.stop="openPopSearch(false)"></i>
        </el-tooltip>
        <!-- <el-tooltip class="item" effect="dark" :content="$t('webchat.shareScreen')" placement="right">
          <i class="msg_do iconfont icon-zhuomianfenxiang"  v-show="expandLayout && !webchatData.leavemsg && ScreenShareIconShow && (chatInfo.platform === 'pc') && !isDocking" v-popover:popover5 @click.stop="startShareScreen"></i>
        </el-tooltip> -->
        <!-- <el-tooltip class="item" effect="dark" :content="$t('remoteControl.remoteControl')" placement="right"> -->
        <!-- <el-tooltip class="item" effect="dark" :content="$t('webchat.shareScreen')" placement="right">
          <i class="msg_do iconfont icon-zhuomianfenxiang"  v-show="expandLayout && !webchatData.leavemsg && ScreenShareIconShow && (chatInfo.platform === 'pc') && !isDocking" v-popover:popover5 @click.stop="startShareScreen"></i>
        </el-tooltip> -->
        <!-- <el-tooltip class="item" effect="dark" :content="$t('remoteControl.remoteControl')" placement="right">
          <i v-show="showRemoteControl && expandLayout" class="msg_do iconfont icon-yuanchengkongzhi" @click.stop="startRemoteControl"></i>
        </el-tooltip> -->
        <el-tooltip class="item" effect="dark" :content="$t('webchat.openAIRobot')" placement="right">
          <i class="msg_do iconfont icon-jiqirenkai" @click.stop="switchAIRobot('0')" v-show="expandLayout && webchatData.robotAssistId && m7AIRobotStatus"></i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="$t('webchat.closeAIRobot')" placement="right">
          <i class="msg_do iconfont icon-jiqirenguan" @click.stop="switchAIRobot('1')" v-show="expandLayout && webchatData.robotAssistId && !m7AIRobotStatus"></i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="$t('webchat.inputHeight')" placement="right" v-show="inputHeightStatus">
            <i class="msg_do iconfont icon-gaodulagao"  @click.stop="changeInputHeight('gaodulagao')"></i>
          </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="$t('webchat.inputHeight')" placement="top" v-show="!inputHeightStatus">
            <i class="msg_do iconfont icon-gaodusuoxiao" @click.stop="changeInputHeight('gaodusuoxiao')"></i>
          </el-tooltip>
        <el-popover
          placement="right"
          width="100px"
          trigger="hover">
          <div class="blackListName"  @click.stop="showCustomerBlack">{{$t('webchat.addVisitorBlack')}}</div>
          <div class="blackListName" v-show="webchatData.platform !== 'dy' && webchatData.platform !== 'wxkf'" style="margin-top: 10px" @click.stop="showCustomerBlack('ip')">{{$t('webchat.addIPBLackList')}}</div>
          <i class="msg_do iconfont icon-heimingdan" slot="reference" v-show="isShowAddBlacklist && expandLayout && webchatData.showFunBtn"></i>
        </el-popover>
        <sendwebPagePop
          placement = 'right'
          @iframeSend="iframeSend"
          :tabType="tabType"
          :iframUrl="defaultiframeMsgUrl"
          :iframeMsgWidth="iframeMsgWidth"
          :modelData="'popover8'"
          :iframeMsgHeight="iframeMsgHeight"
          v-show="(webchatData.platform === 'pc' || webchatData.platform === 'app' ||  webchatData.platform === 'wap') && !isDocking && expandLayout">
        </sendwebPagePop>
      </el-popover>
      <!-- 工具栏结束 -->
      <!--<div v-show="(!webchatData.leavemsg || (webchatData.leavemsg && webchatData.platform !== 'sdk)) && webchatData.status !== 'changePeer'">-->
      <div class="leavemsg_box_parent">
        <div v-show="webchatData.leavemsg && !isShowLeaveMsg && webchatData.status !== 'changePeer'" class="leavemsg_box">
          <span>{{$t('webchat.leaveMsgTitle')}}</span>
        </div>
        <div v-show="webchatData.status === 'changePeer'" class="leavemsg_box">
          <span>{{$t('webchat.changePeerOther')}}</span>
        </div>
        <div v-show="webchatData.oldLeaveMsg" class="leavemsg_box">
          <span>{{$t('webchat.oldLeaveMsgCard')}}</span>
        </div>
        <div v-show="isMonitorVersion" class="leavemsg_box">
          <span>{{$t('public.monitorVerTip')}}</span>
        </div>
        <div class="webchat_other_msg clearBoth">
          <webchat-timer :isCard="false" :startWaitTimer="sessionStartWaitTimer" :startWaitTimerStamp="sessionStartWaitTimerStamp" class="webchat_time_box"></webchat-timer>
          <div class="aiAnswerContainer">
            <div class="aiAnswers" v-if="m7RobotAnswers && m7RobotAnswers.length > 0">
              <div class="aiAnswersDetails" v-for="(answer, index) in m7RobotAnswers" :key="index">
                <span class="ai_tag">智</span>
                <p class="ai_content">{{answer.contentText}}</p>
                <div class="ai_button">
                  <span @click.stop="sendAIContent('send', answer)">发送</span>
                  <span @click.stop="sendAIContent('use', answer)">使用</span>
                  <span>
                    <el-popover
                      placement="top"
                      width="400"
                      v-model="answer.correctVisible"
                      trigger="manual"
                      @after-leave="correctCancel(answer)">
                      <div style="font-size: 12px;">{{$t('public.note')}}</div>
                      <el-input
                        type="textarea"
                        :rows="4"
                        resize="none"
                        v-model.trim="correctContent">
                      </el-input>
                      <div class="correct-btn-box">
                        <el-button class="correct-btn" size="mini" @click="correctCancel(answer)">{{$t('public.cancel')}}</el-button>
                        <el-button class="correct-btn" size="mini" type="primary" @click="correctSubmit(answer)">{{$t('webchat.send')}}</el-button>
                      </div>
                      <span slot="reference" @click="correctBtn(answer)">纠错</span>
                    </el-popover>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <el-dropdown trigger="click" class="msg_do mydropdown" @command="changeFont"  size="small" v-show="!expandLayout">
            <span class="el-dropdown-link">
              <i class="icon icon-font iconfont" ></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="fontSize">
              <el-dropdown-item :class="chatMsgCon.font === 'font12' ? 'active' : ''" command="12">12</el-dropdown-item>
              <el-dropdown-item :class="chatMsgCon.font === 'font14' ? 'active' : ''" command="14">14</el-dropdown-item>
              <el-dropdown-item :class="chatMsgCon.font === 'font16' ? 'active' : ''" command="16">16</el-dropdown-item>
              <el-dropdown-item :class="chatMsgCon.font === 'font18' ? 'active' : ''" command="18">18</el-dropdown-item>
              <el-dropdown-item :class="chatMsgCon.font === 'font20' ? 'active' : ''" command="20">20</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <i class="msg_do icon-biaoqing iconfont" v-popover:popover3></i>
          <el-tooltip class="item" effect="dark" :content="userAgent ? $t('webchat.capture') : $t('webchat.captureError')" v-show="!expandLayout" placement="top">
            <i class="msg_do icon-jietu iconfont" :class="userAgent ? '' : 'icon_disabled'" v-popover:popover6 @click.stop="StartCapture"></i>
          </el-tooltip>
          <!-- modify by liang.qi -->
          <!-- fix: 文件上传中不允许多次点击上传按钮 -->
          <i class="msg_do iconfont icon-tupian msg_do_insert" ref="uploadWebchatImg_insert" v-show="!mes">
          </i>
          <i class="msg_do iconfont icon-tupian msg_do_insert" v-show="mes">
          </i>
          <!-- modify by liang.qi -->
          <el-tooltip class="item" effect="dark" :disabled="chatInfo.platform !== 'weibo' && chatInfo.platform !== 'wxmini' && chatInfo.platform !== 'ocpc' && chatInfo.platform !== 'dy'" :content="'该渠道不支持发送文件'" placement="top">
            <span class="mydiv" style="float:left">
              <i class="msg_do iconfont icon-imwenjian msg_do_insert" :class="chatInfo.platform !== 'weibo' && chatInfo.platform !== 'wxmini' && chatInfo.platform !== 'ocpc' && chatInfo.platform !== 'dy' ? '' : 'icon_disabled'" ref="uploadWebchatFile_insert"></i>
            </span>
          </el-tooltip>
          <el-dropdown trigger="click" placement="top" v-show="!webchatData.leavemsg && !isDocking && videoChatIconShow && (chatInfo.platform === 'pc' || chatInfo.platform === 'sdk' || chatInfo.platform === 'wap')" class="msg_do" @command="startVideoChat" size="small">
            <span class="el-dropdown-link">
              <i class="iconfont icon-shipin"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="fontSize">
              <el-dropdown-item command="video">视频通话</el-dropdown-item>
              <el-dropdown-item command="voice">语音通话</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-popover v-if="chatInfo.platform === 'pc' || chatInfo.platform === 'wap'" class="popover_form_msg" popper-class="mypopover" effect="dark" placement="top" v-show="sessionFormList.length" v-model="formListVisible">
            <div
              class="sessionFormLi clearfix"
              v-for="(formLi, index) in sessionFormList"
              @click="sendFormData(formLi)">
              <p :title="formLi.sessionForm.formName">{{formLi.sessionForm.formName}}</p>
              <!-- <span class="iconfont icon-zhengyan"></span> -->
              <el-popover class="item" popper-class="mypopover" effect="dark"  placement="right" trigger="hover">
                <div class="descriptionBox">
                  <p class="description">{{formLi.sessionForm.description}}</p>
                  <input v-for="(list, liIndex) in formLi.sessionForm.form" :placeholder="list.placeholder" disabled="true" type="text">
                </div>
                <span class="iconfont icon-zhengyan" slot="reference"></span>
              </el-popover>
            </div>
            <span class="mydiv" style="float:left;color:#878787;cursor: pointer;" slot="reference" >
              <i class="msg_do iconfont icon-biaodan"></i>
            </span>
          </el-popover>
          <el-tooltip class="item" effect="dark" :content="$t('remoteControl.remoteControl')" placement="top">
            <i v-show="showRemoteControl" class="msg_do iconfont icon-pingmugongxiang" @click.stop="startRemoteControl"></i>
          </el-tooltip>
          <!-- modify by liang.qi end-->
          <el-tooltip class="item" v-show="!webchatSatisfiedForbid && chatInfo.platform !== 'ocpc' && chatInfo.platform !== 'dy'" effect="dark" :content="$t('webchat.satisfactionEvaluation')" placement="top">
            <i class="msg_do iconfont icon-pingjia" @click.stop="pushImCSRInfo" v-show="!webchatData.leavemsg"></i>
          </el-tooltip>
          <el-tooltip class="item"  effect="dark" :content="$t('webchat.authorizedConnection')" placement="top">
            <i class="msg_do iconfont icon-kaiguan1" @click.stop="sendAuthorizedConnection" v-show='(chatInfo.platform=="weixin")&&(!chatInfo.headUrl)&&snsapiUserinfoFlag'></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="$t('webchat.knowledgeSearch')" placement="top">
            <i class="msg_do iconfont icon-zhishikujiansuo" v-show="!expandLayout" @click.stop="openPopSearch(false)"></i>
          </el-tooltip>
          <sendwebPagePop
            @iframeSend="iframeSend"
            :tabType="tabType"
            :iframeMsgWidth="defaultiframeMsgWidth"
            :modelData="'popover4'"
            :iframUrl="defaultiframeMsgUrl"
            :iframeMsgHeight="defaultiframeMsgHeight"
            v-show="(webchatData.platform === 'pc' || webchatData.platform === 'app' ||  webchatData.platform === 'wap') && !isDocking && !expandLayout">
          </sendwebPagePop>
          <el-popover
            placement="top-start"
            width="100px"
            trigger="hover">
            <div class="blackListName" @click.stop="showCustomerBlack">{{$t('webchat.addVisitorBlack')}}</div>
            <div class="blackListName" v-show="webchatData.platform !== 'dy' && webchatData.platform !== 'wxkf'" style="margin-top: 10px" @click.stop="showCustomerBlack('ip')">{{$t('webchat.addIPBLackList')}}</div>
            <i class="msg_do iconfont icon-heimingdan" slot="reference" v-show="isShowAddBlacklist && !expandLayout && webchatData.showFunBtn"></i>
          </el-popover>
          <!-- <el-tooltip class="item" effect="dark" :content="$t('webchat.shareScreen')" placement="top">
            <i class="msg_do iconfont icon-zhuomianfenxiang"  v-show="!expandLayout && !webchatData.leavemsg && ScreenShareIconShow && (chatInfo.platform === 'pc') && !isDocking" v-popover:popover5 @click.stop="startShareScreen"></i>
          </el-tooltip> -->
          <!-- <el-tooltip class="item" effect="dark" :content="$t('remoteControl.remoteControl')" placement="top">
            <i v-show="showRemoteControl && !expandLayout" class="msg_do iconfont icon-yuanchengkongzhi" @click.stop="startRemoteControl"></i>
          </el-tooltip> -->
          <!-- <el-tooltip class="item" effect="dark" :content="$t('webchat.inputHeight')" placement="top" v-show="inputHeightStatus&&!expandLayout">
            <i class="msg_do iconfont icon-gaodulagao"  @click.stop="changeInputHeight('gaodulagao')"></i>
          </el-tooltip> -->
          <i class="msg_do iconfont  novice-boot-box-wrap" :class="webchatData.lockStatus?'icon-suoding': 'icon-jiesuo'" v-if="autoCloseSession === '1' && !expandLayout && unlockShow" @click.stop="lockOrUnlockSession()">
            <div class="novice-circle-group" v-if="!noviceSuccess&&!getNoviceKeyStatus.webchatSessionLocking" style="right:-5px;">
              <div class="novice-circle4"></div>
              <div class="novice-circle3"></div>
              <div class="novice-circle2"></div>
              <div class="novice-circle1"></div>
            </div>
            <div style="position: absolute;top: -126px;right: -50px;padding-bottom: 10px;z-index: 100;">
              <novice-boot v-if="!noviceSuccess&&!getNoviceKeyStatus.webchatSessionLocking" :NoviceStyle="NoviceStyle" :NoviceArr="NoviceArr" NoviceKey="webchatSessionLocking"  @updateGuidanceSuccess="updateGuidanceSuccess"></novice-boot>
            </div>
          </i>
          <el-tooltip class="item" effect="dark" :content="$t('webchat.openAIRobot')" placement="top">
            <i class="msg_do iconfont icon-jiqirenkai" @click.stop="switchAIRobot('0')" v-show="!expandLayout && webchatData.robotAssistId && m7AIRobotStatus"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="$t('webchat.closeAIRobot')" placement="top">
            <i class="msg_do iconfont icon-jiqirenguan" @click.stop="switchAIRobot('1')" v-show="!expandLayout && webchatData.robotAssistId && !m7AIRobotStatus"></i>
          </el-tooltip>
          <i class="msg_do iconfont icon-gongju" style="float: right" v-show="expandLayout" v-popover:popover7><img src="./img/up.svg" />
          </i>
        <i style="float: right;position:relative" class="msg_do iconfont  novice-boot-box-wrap" :class="webchatData.lockStatus?'icon-suoding': 'icon-jiesuo'" v-if="autoCloseSession === '1' && expandLayout && unlockShow" @click.stop="lockOrUnlockSession()">
          <div class="novice-circle-group" v-if="!noviceSuccess&&!getNoviceKeyStatus.webchatSessionLocking" style="right:-15px;">
            <div class="novice-circle4"></div>
            <div class="novice-circle3"></div>
            <div class="novice-circle2"></div>
            <div class="novice-circle1"></div>
          </div>
          <div style="position: absolute;top: -126px;right: -50px;padding-bottom: 10px;z-index: 100;">
            <novice-boot v-if="!noviceSuccess&&!getNoviceKeyStatus.webchatSessionLocking" :NoviceStyle="NoviceStyle" :NoviceArr="NoviceArr" NoviceKey="webchatSessionLocking"  @updateGuidanceSuccess="updateGuidanceSuccess"></novice-boot>
          </div>
        </i>
          <el-dialog :close-on-click-modal="false" :modal-append-to-body='false' lock-scroll top="10%" :title="this.$t('webchat.addBlack')" :visible.sync="addBlackDialog" size="tiny">
            <span class="send_chat_msg_title">{{$t('webchat.addBlackName', {name:this.webchatData.sName})}}</span>
            <div class="dic_item">
              <textarea :placeholder="this.$t('webchat.addBlackReason')" class="blacklist_con" v-model.trim="addBlackReason" cols="30" rows="5" ></textarea>
            </div>
                <span slot="footer" class="dialog-footer">
                  <el-button class="primary_btn" @click.stop="addBlackDialog = false">{{$t('public.cancel')}}</el-button>
                  <el-button type="primary" class="primary_btn" @click.stop="customerAddBlack">{{$t('public.confirm')}}</el-button>
                </span>
          </el-dialog>
          <el-dialog modal-append-to-body lock-scroll top="5%" customClass="ShareInstallDesc" :title="this.$t('webchat.shareScreen')" :visible.sync="showShareInstallDesc" size="large">
              <p class="font14">在chrome浏览器下，打开自定义及控制 > 更多工具 > 扩展程序页面，把下载到本地的Screensharing-utility_v1.0.1.crx.zip文件解压后，拖动到扩展程序页面里即可完成安装。
            完成安装后，chrome浏览器右上方会有桌面共享的图标提示，刷新后即可使用屏幕共享功能。</p>
            <div class="content">
              <div class="left">
                <img src="./../../../assets/img/shareScreenInstall1.png">
                <span class="font14">1.在chrome浏览器下，打开扩展程序页面</span>
              </div>
              <div class="right">
                <img src="./../../../assets/img/shareScreenInstall2.png">
                <span class="font14">2.将解压后的Screensharing-utility_v1.0.1.crx拖拽至扩展程序页面，完成安装，刷新页面即可使用屏幕共享功能。</span>
              </div>
            </div>
            <div slot="footer" class="dialog-footer footer">
              <el-button class="primary_btn" @click.stop="closeShareInstallDesc">{{$t('public.colse')}}</el-button>
            </div>
          </el-dialog>
        </div>
        <el-form :model="sendChatMsg" class="send_msg_form" ref="sendChatMsg">
          <el-form-item>
            <div v-show="webchatData.leavemsg && !isShowLeaveMsg" class="instead"></div>
            <textarea id="textareaContent" v-show="!(webchatData.leavemsg && !isShowLeaveMsg)" autofocus=true  :style="inputHeightStatus ? 'height: 80px' : 'height: 280px'" class="send_msg_textarea" type="textarea" rows="3" v-model="sendChatMsg.content" @keydown="selectItemDown" @keyup="selectItem($event)" :class="chatMsgFontClass"></textarea>
            <div class="suggest" v-show="showSuggest === true">
              <ul>
                <li class="cursor_li ellipsis" v-for="(domain, index) in listNeedShow" :key="index + domain.data" :title="domain.data" :class="domain.flag ? 'active' : ''"  @click.stop="suggestListAdd(domain.data)">
                  <span v-if="domain.quickCon">{{domain.quickCon}}  {{domain.data}}</span>
                  <span v-else>{{domain.data}}</span>
                </li>
              </ul>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="replyMsg primary_btn" @click="handleSubmit" size="small">{{$t('webchat.send')}}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="parseImgDialog">
      <el-dialog
        :title="this.$t('webchat.sendImg')"
        :visible.sync="parseImg.dialog"
        :before-close="parseImgCancel"
        width="30%">
        <i class="parseIcon el-icon-warning"></i><span class="parseTitle">{{$t('webchat.isSendImg')}}</span>
        <div class="uploadingImg" v-if="parseImg.loading" v-loading="parseImg.loading"></div>
        <div class="parseImgBox" v-if="!parseImg.loading">
          <img :src="parseImg.parseImgUrl">
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="parseImgCancel">{{$t('public.cancel')}}</el-button>
          <el-button id="webchatPasteImageSendBtn" class="webchatPasteImageSendBtn" size="mini" type="primary" @click="sendParseImg">{{$t('webchat.send')}}</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 图片粘贴上传 -->
    <DropImg :webchatInfo="chatInfo" :webchatData="webchatData"></DropImg>
  </div>
</template>

<script>
//  import { deepClone, getCurrentDate, getCurrentDateTime, getStrLength } from '@/utils/m7Utils'
  import { deepClone, getCurrentDate, getCurrentDateTime, getStrLength, getCache, contains, isHasFunc } from '@/utils/m7Utils'
  import * as types from '@/store/modules/webchat/mutation-types.js'
  import { uploadTo7moorImDomain, PasteImguploadTo7moorImDomain, cos7moorImDomain } from '@/utils/qiniuUtils'
  import {checkform} from '@/utils/validate'
  import {NiuniuCaptureObject} from '@/utils/capture'
  import * as webchatUtils from '@/utils/webchat.js'
  import * as uuid from 'uuid'

  import EmojiFace from '@/components/public-modules/emoji-face'
  import Emoticion from '@/components/public-modules/emoticon/index.vue'
  import WebchatTimer from '@/components/business-modules/webchat/WebchatTimers'
  import noviceBoot from '@/components/public-modules/novice-boot/index.vue'
  import sendwebPagePop from '@/components/business-modules/webchat/sendwebPagePop'
  import bus from '@/store/eventBus'
  import Vue from 'vue'
  import DropImg from './WebchatDropImg'
  function rgb2value (r, g, b) {
    return r | g << 8 | b << 16
  }
  console.log(uuid)
  export default {
    name: 'webchatConSendMsg',
    data () {
      return {
        flag: this.$store.getters.isEcommerce ? 'ecommerce' : 'kf',
        faceVisible: false,
        formListVisible: false,
        showSuggest: false,     // 展示自动输入框
        wordLast: '',           // 缓存的上一个单词
        wordLastList: [],       // 上次正则筛选出来的快捷回复
        listNeedShow: [],       // 需要展示的数据
        selectIndex: -1,        // 本次选中的index
        videoChatIconShow: false,
        addBlackDialog: false, // 加入黑名单弹窗
        addBlackReason: '', // 加入黑名单原因
        VideoActionTips: '',
        iframeMsgWidth: '',   // iframe消息宽度
        iframeMsgHeight: '',   // iframe消息高度
        beforeTimestamp: 0,
        iframUrl: '',
        activeName:'first',      // 表情包标签页的显示
        webchatSatisfiedForbid: false,
        NoviceStyle: 'width:290px;',
        NoviceArr: [{title: this.$t('market.sessionLocking'), text: '<span class="iconfont icon-jiesuo" style="display:inline-block;margin: 0 10px 10px 0;float:left"></span><span style="font-size:12px;">' + this.$t('webchat.seesionLockText1') + '</span><br><span class="iconfont icon-suoding" style="display:inline-block;margin:6px 10px 0 0;"></span><span style="font-size:12px;">' + this.$t('webchat.seesionLockText2') + '</span>'}],
        noviceSuccess: false,
        autoCloseSession: '0',
        popover5Show: true,
        uploadSourceLink: '',       // 上传文件地址暂存
        showShareInstallDesc: false,
        ScreenShareIconShow: false,
        showRemoteControl: false,
        snsapiUserinfoFlag:false,
        addBlackType: '',
        isShowAddBlacklist: true, // 是否展示加入黑名单
        inputHeightStatus: false,
        captureRet: '',
        parseImg: {
          parseImgUrl: '',
          dialog: false,
          loading: false
        },
        defaultiframeMsgHeight: '',
        defaultiframeMsgWidth: '',
        defaultiframeUrl: '',
        defaultiframeMsgUrl: '',
        captureObj: null,  // 截图控件实例
        captureInstallcheck: true, // 检查截图插件的安装
        isUseAiContent: '',        // 暂存AI推送回答使用的id
        robotAssistAnswerType: '', // 暂存AI推送回答使用的type
        robotAssistQuestion: '',    // 暂存AI推送回答使用的问题
        expandLayout: true, //展开布局
        unlockShow: true,
        correctContent: "",
        isEcommerce: this.$store.getters.isEcommerce ? true : false,
        // 发送图片展示提示
        mes: null,
        linkUrl: '',
        inter: null
      }
    },
    props: {
      iframeMsgUrl: { // 外嵌地址
        type: String,
        default: ''
      },
      // expandLayout: { // 展开布局flag
      //   type: Boolean,
      //   default: false
      // },
      sendChatMsg: { // 发送聊天消息
        type: Object,
        default () {
          return {
            content: ''
          }
        }
      },
      webchatUserHistory: { // 聊天历史
        type: Array,
        default () {
          return []
        }
      },
      uploaded: { // 上传信息
        type: Object,
        default () {
          return {
            uploadImg: false,
            uploadFile: {
              flag: false,
              progress: '',
              name: ''
            }
          }
        }
      },
      chatMsgCon: { // 聊天字体大小
        type: Object,
        default () {
          return {
            font: 'font12'
          }
        }
      },
      kmContent: {
        type: Object
      }
    },
    components: {
      EmojiFace,
      WebchatTimer,
      noviceBoot,
      sendwebPagePop,
      Emoticion,
      DropImg
    },
    computed: {
      shortcutOpen: {
        get(){
          return this.$store.state.config.shortcutKey.openShortcutKey
        },
        set(v) { }
      },
      getNoviceKeyStatus () {
        let guidance = this.$getCache('guidance')
//        return this.$store.state.session.dicMap.guidance || {'webchatSessionLocking': true} // 服务不对，或者是没有这个对象时，默认不显示。webchatSessionLocking为气泡的key
        return guidance || {'webchatSessionLocking': true} // 服务不对，或者是没有这个对象时，默认不显示。webchatSessionLocking为气泡的key
      },
      isShowLeaveMsg () {
        let sessionPlatForm = this.$store.state.webchat.current.webchat_todo.currentSession[this.sessionId].platform
        if (sessionPlatForm && (sessionPlatForm === 'sdk' || sessionPlatForm === 'pc' || sessionPlatForm  === 'wap')) {
          return true
        } else {
          return false
        }
      },
      // 视频是否正在加载中
      isVideoing () {
        return this.$store.state.webchat.isVideoing
      },
      userAgent () {
        let flag = true
        if (/macintosh|mac os x/i.test(navigator.userAgent)) {
          flag = false
        }
        return flag
      },
      attachmentMaxSize () {
        return this.$store.state.attachmentMaxSize
      },
      videoSessionid () {
        return this.$store.state.webchat.videoChatData.videoSessionid
      },
      videoInviteSessionId () {
        return this.$store.state.webchat.videoInvitedData.videoInviteSessionid
      },
      isMonitorVersion () {
        let user = this.$store.state.session.user
        return user.uversion && user.uversion === 'monitor' || false
      },
      isInviteVideo () {
        return this.$store.state.webchat.isinviteVideo
      },
      screenShareSessionId () {
        return this.$store.state.webchat.shareScreenSessionid
      },
      isScreenShareing () {
        return this.$store.state.webchat.isShareScreening
      },
      inputRandom () {
        return this.$store.state.webchat.transCache.copyImSearchValue.random
      },
      copySerachValue () {
        return this.$store.state.webchat.transCache.copyImSearchValue.value
      },
      sessionId () {
        let arr = this.$route.path.split('/')
        return arr[4]
      },
      tabType () {
        let arr = this.$route.path.split('/')
        return arr[3]
      },
      agentName () {
        let data = ''
        if (this.$store.getters.agents && this.$store.getters.agents[this.webchatData.user]) {
          data = this.$store.getters.agents[this.webchatData.user].displayName
        }
        return data
      },
      agentNum () {
        let data = ''
        if (this.$store.getters.agents && this.$store.getters.agents[this.webchatData.user]) {
          data = this.$store.getters.agents[this.webchatData.user].loginName
        }
        return data
      },
      webchatData () {
        console.log(this.$store.state.webchat.current.webchat_all.currentSession,'this.$store.state.webchat.current.webchat_all.currentSession')
        //  会话的详细信息
        if (this.tabType === 'webchat_todo' && this.$store.state.webchat.current.webchat_todo.currentSession[this.sessionId]) {
          return this.$store.state.webchat.current.webchat_todo.currentSession[this.sessionId]
        } else if (this.tabType === 'webchat_all' && this.$store.state.webchat.current.webchat_all.currentSession) {
          return deepClone(this.$store.state.webchat.current.webchat_all.currentSession)
        } else {
          return {}
        }
      },
      chatInfo () {
        let messageObj
        if (this.tabType === 'webchat_todo' && this.$store.state.webchat.current.webchat_todo.chatInfoById[this.sessionId]) {
          messageObj = deepClone(this.$store.state.webchat.current.webchat_todo.chatInfoById[this.sessionId])
        } else if (this.tabType === 'webchat_all' && this.$store.state.webchat.current.webchat_all.chatInfoById) {
          messageObj = deepClone(this.$store.state.webchat.current.webchat_all.chatInfoById)
        } else {
          return {}
        }
        if (typeof messageObj === 'object') {
          if (messageObj.im_icon) {
            messageObj.im_src = messageObj.im_icon + '?imageView2/1/w/50/h/50'
          } else {
            if (messageObj.user && messageObj.user !== 'system' && messageObj.user !== 'robot') {
              let agent = getCache('agents', messageObj.user)
              if (agent.im_icon) {
                messageObj.im_src = agent.im_icon + '?imageView2/1/w/50/h/50'
                if (messageObj.contentType === 'video') {
                  messageObj.im_src = agent.im_icon + '?imageView2/1/w/50/h/50'
                }
              } else {
                messageObj.im_src = ''
              }
            } else if (messageObj.user === 'robot') {
              messageObj.im_src = 'robot'
            }
          }
        }
        return messageObj
      },
      // 访客等待时间
      sessionStartWaitTimer () {
        let info = null
        this.$store.state.webchat.webchatList.webchat_todo.list.forEach((item) => {
          if (item._id === this.sessionId) {
            info = item
          }
        })
        if (info && info.startWaitTimer > -1) {
          return info.startWaitTimer
        } else {
          return -1
        }
      },
      // 访客等待时间戳
      sessionStartWaitTimerStamp () {
        let info = null
        this.$store.state.webchat.webchatList.webchat_todo.list.forEach((item) => {
          if (item._id === this.sessionId) {
            info = item
          }
        })
        if (info && info.startWaitTimerStamp > -1) {
          return info.startWaitTimerStamp
        } else {
          return undefined
        }
      },
      isDocking () { // 途家定制需求
        let info = null
        this.$store.state.webchat.webchatList.webchat_todo.list.forEach((item) => {
          if (item._id === this.sessionId) {
            info = item
          }
        })
        if (info && info.docking) {
          return info.docking
        } else {
          return false
        }
      },
      // 智能机器人状态
      m7AIRobotStatus () {
        let user = this.$store.state.webchat.currentUser || {}
        if (user && user.robotAssistStatus) {
          return user.robotAssistStatus === 'on'
        } else {
          return true
        }
      },
      // 机器人智能回答消息
      m7RobotAnswers () {
        let webchatList = this.$store.state.webchat.webchatList.webchat_todo.list
        let answers = []
        if (webchatList.length > 0) {
          webchatList.forEach((item) => {
            if (item._id === this.sessionId) {
              if (item.m7RobotAnswers && item.m7RobotAnswers.length > 0) {
                answers = item.m7RobotAnswers
              }
            }
          })
        }
        answers.forEach((item) => {
          Vue.set(item, 'correctVisible', false)
          item.correctVisible = false
        })
        return answers
      },
      chatMsgFontClass () {
        let data = this.chatMsgCon.font
        return data
      },
      sessionFormList () {
        let data = deepClone(this.$store.state.webchat.sessionFormList)
        data.forEach((item, index)=>{
          try {
            item.sessionForm = JSON.parse(item.sessionForm)
          } catch (a) {}
        })
        return data
      }
    },
    methods: {
      sendAuthorizedConnection(){
        let data = {
            accessId: this.chatInfo.accessId,
            sid: this.chatInfo.sid,
            chatSessionId:this.chatInfo._id,
        }
        this.$store.dispatch('getWeixinVisitorInfoSendMsg', data).then((res) => {
          if (res.success) {
              this.linkUrl=res.linkUrl
              this.handleSubmit({
              content:res.linkText,
              },'aiText')
          }
        })
      },
      // 发起远程控制
      startRemoteControl () {
        window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'FE-远程控制'])
        let data = {
          isRemoteControl: true,
          remoteFrom: 'webchat',
          remoteCustSid: ''
        }
        data.remoteCustSid = this.webchatData.custId ? this.webchatData.custId : this.webchatData.sid
        data.customerSource = this.webchatData.custId ? 'customer' : 'webchat'
        this.$store.commit('updateRemoteControlInfo', data)
      },
      // 切换机器人辅助坐席开关
      switchAIRobot (type) {
        let data = {
          robotAssistStatus: type === '0' ? 'off' : 'on',
          isAiRobot: true
        }
        this.$store.dispatch('updateCurrentUser', data).then((res) => {
          if (res.success) {
            let desc = type === '0' ? this.$t('webchat.closeAIRobot') : this.$t('webchat.openAIRobot')
            this.$store.commit('webchat/CHANGE_M7_AIROBOT_STATUS', type === '0' ? 'off' : 'on')
            this.$message.success(desc)
          }
        })
      },
      // 改变聊天框高度
      changeInputHeight (type) {
        this.inputHeightStatus = type === 'gaodulagao' ? false : true
        let currentUser = this.$store.state.session.user.loginName + '@' + this.$store.state.session.account.name
        window.localStorage.setItem(currentUser + '/webInputHeight', type)
        this.$store.commit('webchat/CHANGE_INPUT_HEIGHT', type)
        this.$refs.popover7.doClose()
      },
      // 截图事件初始化
      initCapture () {
        this.captureObj = new NiuniuCaptureObject()
        this.captureObj.NiuniuAuthKey = 'niuniu'
        // 此处可以设置相关参数
        this.captureObj.TrackColor = rgb2value(255, 0, 0)
        this.captureObj.EditBorderColor = rgb2value(0, 0, 255)
        //  设置控件加载完成以及  截图完成的回调函数
        this.captureObj.FinishedCallback = this.OnCaptureFinishedCallback
        this.captureObj.PluginLoadedCallback = this.PluginLoadedCallback
        // this.captureObj.VersionCallback = VersionCallback
        this.captureObj.InitNiuniuCapture()
      },
        // 开始截图事件
      StartCapture () {
        // this.$refs.popover6.doShow()
        window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'FE-点击截图'])
        if (/windows|win32/i.test(navigator.userAgent)) {
          if (!document.getElementById('startCaptureFrame')) {
            this.$refs.webchatSendMsg && this.$refs.webchatSendMsg.appendChild(this.captureDom)
          }
          if (this.captureObj === null) {
            this.initCapture()
          }
          const defaultName = '1.jpg' // 此处为了防止上传的数据过大，建议使用JPG格式
          this.captureRet = this.captureObj.DoCapture(defaultName, 0, 0, 0, 0, 0, 0)
          let emCaptureFailed = 0
          let emCaptureUnknown = 2
          if (this.captureRet === emCaptureFailed) { // 判断是否安装插件
            this.captureInstallcheck = false
          } else if (this.captureRet === emCaptureUnknown) {
            this.captureInstallcheck = true
          }
        } else if (/macintosh|mac os x/i.test(navigator.userAgent)) {
          this.captureInstallcheck = false
        }
      },
      reloadFun () {
        this.captureInstallcheck = false
        this.captureRet = 0
      },
      // 截图成功后的事件
      OnCaptureFinishedCallback (type) {
        if (type < 0) {
          // 需要重新安装控件
          this.$message.error('截图控件调用失败，请重新安装')
          return
        }
        switch (type) {
          case 1: {
            this.$message.success('截图成功，请在输入栏粘贴发送')
            break
          }
          case 2: {
            this.$message.error('您取消了截图')
            break
          }
        }
      },
      // 发送智能机器人回答
      sendAIContent (type, item) {
        window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'FE-发送智能机器人回答'])
        if (this.chatInfo.assistRobotType === 'xbot') { // xbot 机器人发送or使用反馈记录
          let usageData = type === 'send' ? 1 : 2
          let xbotHumanAcceptData = {
            robot: this.chatInfo.robotAssistId,
            usage: usageData,
            question: item.question,
            qa_id: item.questionId || ''
          }
          this.$store.dispatch('humanAssistAccept', xbotHumanAcceptData).then(() => {
            console.log('成功反馈')
          })
        }
        var showHtml = false
        if (type === 'send') {
          let robotAiData = {
            questionId: item.questionId || '',
            robotAssistAnswerType: item.robotAssistAnswerType,
            robotAssistQuestion: item.robotAssistQuestion
          }
          let content
          if (item.sendRichText) {
            if (item.contentText !== undefined) {
              content = item.contentText.slice(0, 300)
            } else {
              content = item.content.slice(0, 300)
            }
            content = content.replace(/\n[\s| | ]*\r/g, '')
            content = content.replace(/[\r\n]/g, '')
            content = this.trim(content)
            let desc = content.slice(0, 20)
            let title = content.slice(0, 10)
            let richTextData = {
              richTextUrl: item.url || '',
              richTextPicUrl: item.picUrl || '',
              richTextTitle: title || '',
              richTextDescription: desc || ''
            }
            if (this.chatInfo.platform === 'ocpc' || this.chatInfo.platform === 'dy') {
              this.$message({
                message: this.$t('webchat.notSupportSendingMssageType'),
                type: 'warning'
              })
              return
            }
            this.handleSubmit({}, 'richText', richTextData, robotAiData)
          } else {
            if (item.sendFile) { // 附件类型
              showHtml = true
            } else if (item.content.indexOf('rel="noopener"') > -1) { // 超链接类型
              showHtml = true
            } else if (item.showHtml || (this.chatInfo.platform === 'pc' || this.chatInfo.platform === 'wap')) {
              showHtml = true
            }
            if (item.contentText !== undefined && showHtml) {
              content = item.content
            } else {
              content = item.contentText
            }
            let data = {
              content: content,
              contentText: item.contentText
            }
            // this.handleSubmit({}, 'text', content, robotAiData, showHtml)
            this.handleSubmit(data, 'aiText', '', robotAiData, showHtml)
          }
        } else {
          let content = deepClone(this.sendChatMsg.content.trim())
          let value
          if (item.contentText !== undefined) {
            value = item.contentText
          } else {
            value = item.content
          }
          this.sendChatMsg.content = content + '' + value
          this.isUseAiContent = item.questionId || ''
          this.robotAssistAnswerType = item.robotAssistAnswerType
          this.robotAssistQuestion = item.robotAssistQuestion
          this.$store.commit('webchat/M7AIROBOT_ANSWERS', {sessionId: this.webchatData._id, list: []})
        }
      },
      // 发送or使用知识库内容
      getKmContent (type, item) {
        if (type === 'send') {
          let senddata = {
            _id: item.kmcontent_id,
            platform: this.chatInfo.platform || '',
            accessId: this.webchatData.accessId,
            sid: this.webchatData.sid,
            kmType: item.kmType,
            sessionId: this.webchatData._id
          }
          this.$store.dispatch('getRichTextInfo', senddata).then((resp) => {
            if (resp.success && resp.sendRichText) {
              let content = item.contentTxt ? item.contentTxt.slice(0, 300) : item.content.slice(0, 300)
              let title = item.titleText ? item.titleText : item.title
              content = content.replace(/\n[\s| | ]*\r/g, '')
              content = content.replace(/[\r\n]/g, '')
              content = this.trim(content)
              let desc = content.slice(0, 20)
              let richTextData = {
                richTextUrl: resp.url,
                richTextPicUrl: resp.picUrl || '',
                richTextTitle: title || '',
                richTextDescription: desc || ''
              }
              if (this.chatInfo.platform === 'ocpc' || this.chatInfo.platform === 'dy') {
                this.$message({
                  message: this.$t('webchat.notSupportSendingMssageType'),
                  type: 'warning'
                })
                return
              }
              this.handleSubmit({}, 'richText', richTextData)
            } else if (resp.success && resp.sendAtagText) {
              // 知识库只有(附件/附件+文案)直接查看，不采用链接跳转 --- sendAtagText: true(知识库只有附件/附件+文案)
              this.handleSubmit({}, 'text', resp.atagContent, '', true)
            } else {
              let content = item.contentTxt ? item.contentTxt : item.content
              this.handleSubmit({}, 'text', content)
            }
          })
        } else if (type === 'use') {
          if (this.webchatData.oldLeaveMsg) {
            return
          }
          let content = deepClone(this.sendChatMsg.content.trim())
          let value = item.contentTxt ? item.contentTxt : item.content
          this.sendChatMsg.content = content + '' + value
        }
      },
      correctSubmit (data) {
        if (!this.correctContent) {
          return
        }
        let correctData = {
          robot: this.chatInfo.robotAssistId,
          question: data.question,
          query: data.query,
          correct: this.correctContent,
          qa_id: data.questionId
        }
        this.$store.dispatch('agentCorrect', correctData).then((res) => {
          if (res.success) {
            this.$message.success(this.$t('public.submitSuccess'))
            this.correctCancel(data)
          }
        })
      },
      correctCancel (data) {
        this.$nextTick(() => {
          if (data) {
            data.correctVisible = false
          }
          this.correctContent = ''
        })
      },
      correctBtn (data) {
        data.correctVisible = true
      },
      // 发送辅助坐席智能回答
      sendAiAnswer (type, item, human) {
        let showHtml = false
        if (human) {
          let usageData = type === 'send' ? 1 : 2
          let xbotHumanAcceptData = {
            robot: item.botid || '',
            usage: usageData,
            question: item.question || '',
            qa_id: item.questionId || ''
          }
          this.$store.dispatch('humanAssistAccept', xbotHumanAcceptData).then(() => {
            console.log('成功反馈')
          })
        }
        if (type === 'send') {
          if (item.sendRichText) {
            let content
            if (item.contentText !== undefined) {
              content = item.contentText.slice(0, 300)
            } else {
              content = item.content.slice(0, 300)
            }
            let title = item.titleText ? item.titleText : item.title
            content = content.replace(/\n[\s| | ]*\r/g, '')
            content = content.replace(/[\r\n]/g, '')
            content = this.trim(content)
            let desc = content.slice(0, 20)
            let richTextData = {
              richTextUrl: item.url || '',
              richTextPicUrl: item.picUrl || '',
              richTextTitle: title || '',
              richTextDescription: desc || ''
            }
            if (this.chatInfo.platform === 'ocpc' || this.chatInfo.platform === 'dy') {
              this.$message({
                message: this.$t('webchat.notSupportSendingMssageType'),
                type: 'warning'
              })
              return
            }
            this.handleSubmit({}, 'richText', richTextData)
          } else {
            let content
            if (item.sendFile) { // 附件类型
              showHtml = true
            } else if (item.content.indexOf('rel="noopener"') > -1) { // 超链接类型
              showHtml = true
            } else if (item.showHtml || (this.chatInfo.platform === 'pc' || this.chatInfo.platform === 'wap')) {
              showHtml = true
            }
            if (item.contentText !== undefined && showHtml) {
              content = item.content
            } else {
              content = item.contentText
            }
            let data = {
              content: content,
              contentText: item.contentText
            }
            this.handleSubmit(data, 'aiText', '', false, showHtml)
          }
        } else {
          if (this.webchatData.oldLeaveMsg) {
            return
          }
          let content = deepClone(this.sendChatMsg.content.trim())
          let value
          if (item.contentText !== undefined) {
            value = item.contentText
          } else {
            value = item.content
          }
          this.sendChatMsg.content = content + '' + value
        }
      },
      updateGuidanceSuccess () {
        this.noviceSuccess = true
      },
      // 锁定或解锁会话
      lockOrUnlockSession (status) {
        window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'FE-锁定或解锁会话'])
        let data = {
          'sessionId': this.sessionId,
          sid: this.webchatData.sid || ''
        }
        if (!this.webchatData.lockStatus) {
          this.$store.dispatch('webchatLockSession', data).then((resp) => {
            if (resp && resp.success) {
              this.$message({
                message: this.$t('webchat.seesionLockSuccess'),
                type: 'success'
              })
              this.$store.commit('webchat/SET_LOCK_SESSION_STATUS', {flag: true, sessionId: this.sessionId})
              let obj = {
                type: 'system',
                platform: '', // data.platform
                sid: this.sessionId,
                createTime: resp.time,
                message: resp.time + this.$t('webchat.lockSeesion'),
                _id: this.sessionId
              }
              this.$store.commit('webchat/UPDATE_WEBCHAT_MESSAGE_LIST', obj)
            }
          })
        } else {
          this.$store.dispatch('webchatUnlockSession', data).then((resp) => {
            if (resp && resp.success) {
              this.$message({
                message: this.$t('webchat.seesionUnLockSuccess'),
                type: 'success'
              })
              this.$store.commit('webchat/SET_LOCK_SESSION_STATUS', {flag: false, sessionId: this.sessionId})
              let obj = {
                type: 'system',
                platform: '', // data.platform
                sid: this.sessionId,
                createTime: resp.time,
                message: resp.time + this.$t('webchat.unlockSeesion'),
                _id: this.sessionId
              }
              this.$store.commit('webchat/UPDATE_WEBCHAT_MESSAGE_LIST', obj)
            }
          })
        }
      },
      fetchData () {
        this.$nextTick(function () {
          let that = this
          this.$store.dispatch('getCache', {type: 'channelGlobalSet'}).then((channelGlobalSet) => {
            that.defaultiframeMsgHeight = channelGlobalSet.iframeHeight
            that.defaultiframeMsgWidth = channelGlobalSet.iframeWidth
            that.defaultiframeMsgUrl = channelGlobalSet.iframeUrl
            that.iframUrl = channelGlobalSet.iframeUrl
            that.iframeMsgWidth = channelGlobalSet.iframeWidth
            that.iframeMsgHeight = channelGlobalSet.iframeHeight
            that.autoCloseSession = channelGlobalSet.autoCloseSession || ''
            let ishttps = window.location.protocol === 'https:'
            if (channelGlobalSet.videoChatOn === '1') {
              that.videoChatIconShow = true
            } else {
              that.videoChatIconShow = false
            }
            if (channelGlobalSet.shareScreen === '1' && ishttps) {
              that.ScreenShareIconShow = true
            } else {
              that.ScreenShareIconShow = false
            }
          })
        })
      },
      // 上传初始化
      initUploaded () {
        this.$nextTick(function () {
          clearTimeout(this.inter)
          this.mes && this.mes.close()
          this.mes = null
          let img = document.getElementById('uploadWebchatImg')
          let file = document.getElementById('uploadWebchatFile')
          if (img || file) {
            let arr = document.getElementsByClassName('webchat_other_msg')[0].getElementsByClassName('moxie-shim')
            if (arr.length) {
              let newlen = arr.length
              for (let i = 0; i < newlen; i++) {
                // 因为arr是会变的，所以要清空dom必须用[0]
                arr[0].parentNode.removeChild(arr[0])
              }
            }
            if (img) {
              this.initUploadWebchatImg()
            }
            if (file) {
              if (this.chatInfo.platform !== 'weibo' && this.chatInfo.platform !== 'wxmini' && this.chatInfo.platform !== 'weixin' && this.chatInfo.platform !== 'ocpc' && this.chatInfo.platform !== 'dy') {
                this.initUploadWebchatFile()
              } else if (this.chatInfo.platform === 'weixin') {
                this.initUploadWebchatVideo()
              }
            }
          }
        })
      },
      trim (data) {
        if (!data) {
          return ''
        }
        let _str = data
        return _str.replace(/(^\s*)|(\s*$)/g, '')
      },
      // 发送消息
      handleSubmit (data, type, newData, aiData, showHtml, newCardInfoData, uploadData, cardInfo) {
        // messageList更新前避免提交操作报错 replyMsg push undefined 处理
        let chatInfoId = uploadData && uploadData._id ? uploadData._id  : this.chatInfo._id
        if (!this.$store.state.webchat.current.webchat_todo.messageList[chatInfoId]) {
          this.$message({
            message: this.$t('webchat.awaitHistoryLoadToSendMsg'),
            type: 'warning'
          })
          window.event && window.event.preventDefault()
          return
        }
        let str = ''
        if (newData) {
          str = newData
        } else if (type === 'iframe') {
          str = this.iframUrl
        } else if (type === 'file' || type === 'image' || type === 'wechatvideo') {
          str = this.uploadSourceLink
        } else if (type === 'aiText') {
          type = 'text'
          str = data.content
        } else {
          str = this.sendChatMsg.content
        }
        if (type === 'richText' && newData) {
          str = newData.richTextUrl
        }
        if ((type === 'newCardInfo' && newCardInfoData) || type === 'cardInfo' || type === 'ecommerceOrderCardInfo') {
          str = this.$t('webchat.cardInfoMessage')
        }
        if (type === 'newCardInfo' &&
          (this.chatInfo.platform === 'weibo'
            || this.chatInfo.platform === 'weixin'
            || this.chatInfo.platform === 'wxmini'
            || this.chatInfo.platform === 'dy'
            || this.chatInfo.platform === 'wxkf')) {
          this.$message({
            message: this.$t('webchat.newCardInfoWarn'),
            type: 'warning'
          })
          return
        }
        str = this.trim(str)
        if (str) {
          let timeStamp = new Date().getTime()
          let sendData = {
            accessId: this.chatInfo.accessId,
            content: str,
            contentType: type || 'text',
            displayName: this.agentName,
            exten: this.agentNum,
            firstReply: false,
            im_icon: this.$store.state.session.user.im_icon || '',
            lastClaimTime: this.chatInfo.lastClaimTime,
            lastRedirectTime: '',
            lastRedirectUserTime: '',
            manualTime: this.chatInfo.manualTime,
            platform: this.chatInfo.platform,
            sessionId: this.chatInfo._id,
            sid: this.chatInfo.sid,
            linkUrl:this.linkUrl || '',
            user: this.$store.state.session.user._id || '',
            status: this.chatInfo.status,
            timeStamp: timeStamp,
            type: 'out'
          }
          if (data && data.contentText) {
            this.$set(sendData, "aiContentText", data.contentText)
          }
          if (sendData.contentType === 'sessionForm') {
            sendData.sessionFormId = data._id
          }
          if (uploadData) {
            sendData.accessId = uploadData.accessId
            sendData.lastClaimTime = uploadData.lastClaimTime
            sendData.manualTime = uploadData.manualTime
            sendData.platform = uploadData.platform
            sendData.sessionId = uploadData._id
            sendData.sid = uploadData.sid
            sendData.status = uploadData.status
          }
          if (aiData) {
            sendData.useAIRobotAnswer = true
            sendData.questionId = aiData.questionId || ''
            sendData.robotAssistAnswerType = aiData.robotAssistAnswerType
            sendData.robotAssistQuestion = aiData.robotAssistQuestion
          }
          if (this.isUseAiContent) {
            sendData.useAIRobotAnswer = true
            sendData.questionId = this.isUseAiContent
            sendData.robotAssistAnswerType = this.robotAssistAnswerType
            sendData.robotAssistQuestion = this.robotAssistQuestion
          }
          if (newCardInfoData) {
            sendData.newCardInfo = encodeURIComponent(JSON.stringify(newCardInfoData))
          }
          if (cardInfo) {
            sendData.cardInfo = cardInfo
          }
          this.isUseAiContent = ''
          this.robotAssistAnswerType = ''
          this.robotAssistQuestion = ''
          if (sendData.contentType === 'richText') {
            sendData.richTextUrl = encodeURIComponent(newData.richTextUrl)
            sendData.richTextPicUrl = encodeURIComponent(newData.richTextPicUrl)
            sendData.richTextTitle = encodeURIComponent(newData.richTextTitle)
            sendData.richTextDescription = encodeURIComponent(newData.richTextDescription)
          }
          if (sendData.contentType === 'iframe') {
            sendData.iframeWidth = this.iframeMsgWidth <= 280 ? this.iframeMsgWidth : 280
            sendData.iframeHeight = this.iframeMsgHeight
          }
          let nstr = encodeURIComponent(str)
          let displayName = encodeURIComponent(this.agentName)
          let agentNum = encodeURIComponent(this.agentNum)
          sendData.content = nstr
          sendData.displayName = displayName
          sendData.agentNum = agentNum
          let tempData = deepClone(sendData)
          tempData.sendStatus = 'sending'
          tempData.message = decodeURIComponent(nstr)
          let isEsc = false
          if (showHtml) { // 是否是附件类型
            isEsc = true
            sendData.sendFile = true
          }
          tempData.message = webchatUtils.renderEmoji(tempData.message, isEsc)
          tempData.createTime = getCurrentDateTime()
          let paramsNew = tempData.message.split('?fileName=')
          if (paramsNew.length > 1) {
            let params2 = paramsNew[1].split('?fileSize=')
            if (params2.length) {
              tempData.fileName = params2[0]
            }
          }
          if (tempData.contentType === 'text') {
            tempData.contentHasUrl = ''
            let oldContent = tempData.message
            let contentNew = webchatUtils.msgConvertion(tempData.message)
            if (oldContent !== contentNew) {
              tempData.message = contentNew
              tempData.contentHasUrl = 'have'
              sendData.contentHasUrl = 'have'
              sendData.contentNew = contentNew
            }
          }
          if (tempData.contentType === 'iframe') {
            tempData.iframeWidth = parseInt(tempData.iframeWidth)
            tempData.iframeHeight = parseInt(tempData.iframeHeight)
          }
          if (tempData.contentType === 'richText') {
            tempData.richTextUrl = decodeURIComponent(tempData.richTextUrl)
            tempData.richTextPicUrl = decodeURIComponent(tempData.richTextPicUrl)
            tempData.richTextTitle = decodeURIComponent(tempData.richTextTitle)
            tempData.richTextDescription = decodeURIComponent(tempData.richTextDescription)
          }
          if (this.chatInfo.platform === 'weibo' && getStrLength(str) > 300) {
            this.$message({
              message: this.$t('webchat.weiboWarn'),
              type: 'warning'
            })
            return
          }
          if (tempData.contentType === 'file' && tempData.fileName) {
            tempData.mp3Suffix = this.checkSuffix(tempData.fileName, 'mp3,wav,ogg')
            if (tempData.mp3Suffix) {
              tempData.play = false
            }
          }
          if (this.isEcommerce) {
            tempData.im_icon = this.chatInfo.im_icon
          }
          var index = this.webchatUserHistory.length
          //  发送的时候，不需要sessionForm参数，但是渲染消息的时候，需要这个参数
          if (sendData.contentType === 'sessionForm') {
            tempData.sessionForm = deepClone(data.sessionForm)
          }
          this.$store.commit(types.REPLY_MSG, {data: tempData, index})
//          发送消息的时候触发的是enter回车事件  此处需要屏蔽掉回车按钮
          window.event && window.event.preventDefault()
          this.$store.dispatch('replyMsg', {data: sendData, index}).then((res) => {
            // 如果网络断开，是没有res的，有res值的情况已经在action中处理
            if (res) {
              this.$nextTick(function () {
                if (this.$route.path.split('/')[3] === 'webchat_todo' && document.getElementsByClassName('chat_msg').length) {
                  this.scrollToBottom('chat_msg', 'msg_inner')
                }
              })
            } else {
              this.webchatUserHistory.forEach((item, index) => {
                if (item.timeStamp === tempData.timeStamp) {
                  this.$store.commit(types.UPDATE_SEND_STATUS_FAIL, {data: item, index})
                }
              })
            }
          })
        } else {
          this.$message({
            message: this.$t('webchat.notEmpty'),
            type: 'warning'
          })
        }
        if (!newData && type !== 'iframe' && type !== 'file' && type !== 'image') {
          this.sendChatMsg.content = ''
        }
        if (type === 'file' || type === 'image') {
          this.uploadSourceLink = ''
        }
        // 关闭表情包窗口
        this.faceVisible = false
        return false
      },
      quickSendMsg (data) {
        this.handleSubmit({}, 'text', data)
        this.$nextTick(function () {
          this.scrollToBottom('chatMsgCon', 'chatMsgCon')
        })
      },
      // 客户加入黑名单
      customerAddBlack () {
        let data = {
          addBlackReason: this.addBlackReason,
          _id: this.webchatData._id,
          sid: this.webchatData.sid
        }
        if (!this.addBlackReason) {
          this.$message.error(this.$t('webchat.addBlackReasonNotEmpty'))
          return
        }
        data.type = this.addBlackType === 'ip' ? this.addBlackType : ''
        this.$store.dispatch('customerAddBlack', data).then((res) => {
          if (res && res.success) {
            this.sendChatMsg.addBlackReason = ''
            this.addBlackReason = ''
            this.addBlackDialog = false
            this.$emit('customerAddBlack')
          }
        })
      },
      // 图片上传初始化
      initUploadWebchatImg () {
        let filters
        let that = this
        let fileAdded = (up, files) => {
          if (files.length <= 10) {
            that.inter = setTimeout(() => {
              that.mes = that.$message({
                message: that.$t('webchat.uploadMorePicTip'),
                type: 'info',
                duration: 0
              })
            }, 1000)
          }
        }
        let beforeUpload = function (up, file) {
          that.uploaded.uploadImg = true
          that.uploaded.uploadImgSessionId = that.sessionId
        }
        let uploadProgress = function (up, file) {
          that.changeChatMsgScroll()
        }
        let uploadComplete = () => {
          clearTimeout(that.inter)
          setTimeout(() => {
            that.mes && that.mes.close()
            that.mes = null
          }, 1000)
        }
        let fileUploaded = function (up, file, info) {
          let domain = up.getOption('domain')
          let res = JSON.parse(info||'{}')
          let sourceLink = domain + (that.$store.state.isUseQiniu ? res.key : file.fileKey) // 获取上传成功后的文件的Url
          if (that.uploaded.uploadImgSessionId === that.sessionId) {
            that.uploadSourceLink = sourceLink
            that.handleSubmit({}, 'image')
          }
          that.uploaded.uploadImg = false
          that.uploaded.uploadImgSessionId = ''
        }
        let error = function (up, err, errTip) {
          that.$message.error(errTip)
        }
        let key = function (up, file) {
          let date = getCurrentDate()
          let today = new Date()
          let time = today.getTime()
          let fileName = file.name
          let fileSuffix = ''
          if (fileName) {
            fileSuffix = fileName.substring(fileName.lastIndexOf('.'), fileName.length)
          }
          return 'im/' + that.webchatData.accessId + '/' + date + '/' + time + '/' + uuid.v1() + fileSuffix
        }
        filters = {
          mime_types: [
            { title: 'Image files', extensions: 'jpg,jpeg,gif,png,bmp' }
          ]
        }
        let fileSize
        if (this.chatInfo.platform === 'weixin' || this.chatInfo.platform === 'wxmini') {
          fileSize = '2mb'
        }
        // modify by liang.qi add to $_uploaders for destroy
        this.$_uploaders.push(
          uploadTo7moorImDomain(this.$store.state.session.user._id, 'uploadWebchatImg', filters, fileAdded, beforeUpload, uploadProgress, uploadComplete, fileUploaded, error, key, fileSize, {number:10})
        )
      },
      //表情包上传初始化
      initUploadWebchatImg2 () {
        let filters
        let that = this
        let fileAdded = function (up, files) {

        }
        let beforeUpload = function (up, file) {
          that.uploaded.uploadImg = false
          that.uploaded.uploadImgSessionId = that.sessionId
        }
        let uploadProgress = function (up, file) {
          // that.changeChatMsgScroll()
        }
        let uploadComplete = function () {
        }
        let fileUploaded = function (up, file, info) {
          // console.log(up, file, info)
          let domain = up.getOption('domain')
          let res = JSON.parse(info||'{}')
          let src = domain + (that.$store.state.isUseQiniu ? res.key : file.fileKey)
          
          let data = {
            src,
            id:res.hash
          }
          that.$refs.emoticon.addEmoticon(data)
        }
        let error = function (up, err, errTip) {
          that.$message.error(errTip)
        }
        let key = function (up, file) {
          let date = getCurrentDate()
          let today = new Date()
          let time = today.getTime()
          let fileName = file.name
          let fileSuffix = ''
          if (fileName) {
            fileSuffix = fileName.substring(fileName.lastIndexOf('.'), fileName.length)
          }
          return 'im/' + that.webchatData.accessId + '/' + date + '/' + time + '/' + uuid.v1() + fileSuffix
        }
        filters = {
          mime_types: [
            { title: 'Image files', extensions: 'jpg,jpeg,gif,png,bmp' }
          ]
        }
        let fileSize
        if (this.chatInfo.platform === 'weixin' || this.chatInfo.platform === 'wxmini') {
          fileSize = '2mb'
        }
        let multi = {number:5}
        uploadTo7moorImDomain(this.$store.state.session.user._id, 'emoticon_upload', filters, fileAdded, beforeUpload, uploadProgress, uploadComplete, fileUploaded, error, key, fileSize,multi)
      },
      // 文件上传初始化
      initUploadWebchatFile () {
        let that = this
        let fileAdded2 = function (up, files) {
          if (that.uploaded.uploadFile.progress !== '' && that.uploaded.uploadFile.progress !== that.$t('webchat.uploadError')) {
            files.forEach(file => {
              up.removeFile(file)
            })
            that.$message.error(that.$t('webchat.uploadTip'))
          } else {
            that.uploaded.uploadFile.uploadFileSessionId = that.sessionId
          }
        }
        let beforeUpload2 = function (up, file) {
        }
        let uploadProgress2 = function (up, file) {
          that.uploaded.uploadFile.name = file.name
          that.uploaded.uploadFile.progress = file.percent  + '%'
          that.uploaded.uploadFile.flag = true
          that.changeChatMsgScroll()
        }
        let uploadComplete2 = function () {
        }
        let fileUploaded2 = function (up, file, info) {
          let domain = up.getOption('domain')
          let res = JSON.parse(info||'{}')
          let fileSize
          if (file.size === 0) {
            fileSize = '0 B'
          }
          let k = 1024 // or 1024
          let sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
          let i = Math.floor(Math.log(file.size) / Math.log(k))
          fileSize = (file.size / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]
          let sourceLink = domain + (that.$store.state.isUseQiniu ? res.key : file.fileKey) + '?fileName=' + file.name + '?fileSize=' + fileSize + '&attname=' + file.name
          let fileData
          if (that.$store.state.webchat.current.webchat_todo.chatInfoById[that.uploaded.uploadFile.uploadFileSessionId]) {
            fileData = deepClone(that.$store.state.webchat.current.webchat_todo.chatInfoById[that.uploaded.uploadFile.uploadFileSessionId])
          }
          that.uploadSourceLink = sourceLink
          that.handleSubmit({}, 'file', false, false, false, false, fileData)
          that.uploaded.uploadFile.name = ''
          that.uploaded.uploadFile.progress = ''
          that.uploaded.uploadFile.flag = false
          that.uploaded.uploadFile.uploadFileSessionId = ''
          if (that.$route.path.split('/')[3] !== 'webchat_todo') {
            that.$_uploaders.forEach(uploader => {
              uploader &&
              uploader.destroy &&
              uploader.destroy()
            })
          }
        }
        let error2 = function (up, err, errTip) {
          // 保存报错文件
          up.files.forEach(file => {
            bus.$emit('toReSend', file)
          })
          that.uploaded.uploadFile.progress = that.$t('webchat.uploadError')
          that.$message.error(errTip)
        }
        let key2 = function (up, file) {
          let date = getCurrentDate()
          let today = new Date()
          let time = today.getTime()
          let fileName = file.name
          return 'im/' + that.webchatData.accessId + '/' + date + '/' + time + '/' + fileName
        }
        // modify by liang.qi add to $_uploaders for destroy
        var uploadlimit = '200mb'
        if (that.chatInfo.platform === 'wxkf') {
          uploadlimit = '20mb'
        }
        this.$_uploaders.push(
          uploadTo7moorImDomain(this.$store.state.session.user._id, 'uploadWebchatFile', {}, fileAdded2, beforeUpload2, uploadProgress2, uploadComplete2, fileUploaded2, error2, key2, uploadlimit)
        )
      },
      // 视频上传初始化
      initUploadWebchatVideo () {
        let that = this
        let fileAdded2 = function (up, files) {
        }
        let beforeUpload2 = function (up, file) {
          that.uploaded.uploadFile.uploadFileSessionId = that.sessionId
        }
        let uploadProgress2 = function (up, file) {
          that.uploaded.uploadFile.name = file.name
          that.uploaded.uploadFile.progress = file.percent  + '%'
          that.uploaded.uploadFile.flag = true
          that.changeChatMsgScroll()
        }
        let uploadComplete2 = function () {
        }
        let fileUploaded2 = function (up, file, info) {
          let domain = up.getOption('domain')
          let res = JSON.parse(info||'{}')
          let sourceLink = domain + (that.$store.state.isUseQiniu ? res.key : file.fileKey)
          if (that.uploaded.uploadFile.uploadFileSessionId === that.sessionId) {
            that.uploadSourceLink = sourceLink
            that.handleSubmit({}, 'wechatvideo')
          }
          that.uploaded.uploadFile.name = ''
          that.uploaded.uploadFile.progress = ''
          that.uploaded.uploadFile.flag = false
          that.uploaded.uploadFile.uploadFileSessionId = ''
        }
        let error2 = function (up, err, errTip) {
          if (err.message === "File size error." || err.code === -600) {
            that.$message.error(that.$t('webchat.weixinUploadError001'))
          } else {
            that.$message.error(that.$t('webchat.weixinUploadError'))
          }
        }
        let key2 = function (up, file) {
          let date = getCurrentDate()
          let today = new Date()
          let time = today.getTime()
          let fileName = file.name
          let fileSuffix = ''
          if (fileName) {
            fileSuffix = fileName.substring(fileName.lastIndexOf('.'), fileName.length)
          }
          return 'im/' + that.webchatData.accessId + '/' + date + '/' + time + '/' + uuid.v1() + fileSuffix
        }
        let filters = {
          mime_types: [
            { title: 'Video files', extensions: 'mp4' }
          ]
        }
        // modify by liang.qi add to $_uploaders for destroy
        // 微信渠道，上传视频文件限制，更改为了10mb
        this.$_uploaders.push(
          uploadTo7moorImDomain(this.$store.state.session.user._id, 'uploadWebchatFile', filters, fileAdded2, beforeUpload2, uploadProgress2, uploadComplete2, fileUploaded2, error2, key2, '10mb')
        )
      },
      // 添加表情
      emojiFaceData (data) {
        document.querySelectorAll('.send_msg_textarea')[0].focus()
        let old = this.sendChatMsg.content
        this.sendChatMsg.content = old + data.value
        this.faceIndex = data.index
        this.faceVisible = false
      },
      changeChatMsgScroll () {
        this.$nextTick(function () {
          if (this.$route.path.split('/')[3] === 'webchat_todo' && document.getElementsByClassName('chat_msg').length) {
            this.scrollToBottom({scrollName: 'chat_msg', warpName: 'msg_inner'})
          }
        })
      },
      // 字体大小
      changeFont (command) {
        let data = 'font' + command
        window.localStorage.setItem('imFontCon', data)
        this.chatMsgCon.font = data
        this.$nextTick(() => {
          document.getElementById('textareaContent').style.fontSize = command + 'px'
        })
      },
      iframeSend (data) {
        this.iframUrl = data.iframUrl
        this.iframeMsgWidth = data.iframeMsgWidth
        this.iframeMsgHeight = data.iframeMsgHeight
        this.handleSubmit({}, 'iframe')
        this.$refs.popover7.doClose()
      },
      showCustomerBlack (type) {  
        if (this.isVideoing && this.webchatData._id === this.videoSessionid) {
          this.VideoActionTips = this.$t('videoChat.operaAfterVideo')
          return
        }
        if (this.isInviteVideo && this.webchatData._id === this.videoInviteSessionId) {
          this.VideoActionTips = this.$t('videoChat.operaAfterVideo')
          return
        }
        if (this.isScreenShareing && this.webchatData._id === this.screenShareSessionId) {
          this.VideoActionTips = this.$t('screenShare.operaAfterShare')
          return
        }
        this.addBlackType = type
        this.addBlackDialog = true
      },
      // 屏幕共享
      startShareScreen () {
        window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-屏幕共享'])
        if (navigator.userAgent.indexOf('Chrome') === -1) {
          // 不是chrome
          this.$emit('VideoTips', this.$t('screenShare.changeChrome'))
          return
        }
        if (this.popover5Show) {
          return
        }
        this.$emit('startShareScreen')
      },
      // 开启图片截图插件
      shareInstallDesc () {
        this.showShareInstallDesc = true
      },
      // 关闭图片截图插件
      closeShareInstallDesc () {
        this.showShareInstallDesc = false
      },
      // 开启视频聊天事件
      startVideoChat (data) {
        this.$emit('startVideoChat', data)
        window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'FE-视频会话'])
      },
      // 开启知识库检索
      openPopSearch () {
        window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-菜单栏知识库检索'])
        this.$emit('handleFullChat')
        bus.$emit('openWebchatKm')
      },
      selectItem (event) {
        if (event.ctrlKey && event.keyCode === 13) {
          return
        }
        document.getElementsByClassName('suggest')[0].scrollTop = 0
        let keyWord = this.sendChatMsg.content.trim()
        if (keyWord === '') {
          this.showSuggest = false
          this.selectIndex = -1
          return
        } else {
          let liLength = this.listNeedShow.length    // 获取列表数量
          if (event.keyCode === 38 || event.keyCode === 40) {
            if (liLength > 0) {
              // 上移
              if (event.keyCode === 38) {
                this.selectIndex -= 1
                if (this.selectIndex <= -1) {
                  this.selectIndex = this.listNeedShow.length - 1
                }
                if (this.selectIndex !== -1) {
                  this.sendChatMsg.content = this.listNeedShow[this.selectIndex].data
                  this.moveAutoCompItem(this.sendChatMsg.content)
                }
                document.getElementsByClassName('suggest')[0].scrollTop = 26 * (this.selectIndex - 3)
                this.listNeedShow.forEach((item) => {
                  item.flag = false
                })
                if (this.selectIndex >= 0) {
                  this.listNeedShow[this.selectIndex].flag = true
                }
              }
              // 下移
              if (event.keyCode === 40) {
                this.selectIndex += 1
                if (this.selectIndex > this.listNeedShow.length - 1) {
                  this.selectIndex = 0
                }
                if (this.selectIndex !== -1) {
                  this.sendChatMsg.content = this.listNeedShow[this.selectIndex].data
                  this.moveAutoCompItem(this.sendChatMsg.content)
                }
                document.getElementsByClassName('suggest')[0].scrollTop = 26 * (this.selectIndex - 3)
                this.listNeedShow.forEach((item) => {
                  item.flag = false
                })
                if (this.selectIndex >= 0) {
                  this.listNeedShow[this.selectIndex].flag = true
                }
              }
            }
          } else if (event.keyCode === 13) {
            this.showSuggest = false
            this.suggestListAdd(keyWord)
          } else {
            this.quickReplayAutoComplete(keyWord)
          }

          /**
           * 正在键入的通知
           */
          let timeStamp = new Date().getTime()  // 判断是否少于一秒
          if ((timeStamp - this.beforeTimestamp) > 2000 && this.chatInfo.platform !== 'weibo') {
            this.beforeTimestamp = timeStamp
            this.$store.dispatch('typeNotice', {
              'sid': this.chatInfo.sid,
              'timestamp': timeStamp,
              'platform': this.webchatData.platform,
              'account': this.webchatData.account,
              'accessId': this.webchatData.accessId
            }).then(() => {
            })
          }
        }
      },
//      ctrl + enter回车换行功能
      selectItemDown (event) {
        if (!this.$store.state.config.shortcutKey.openShortcutKey.imSwitch) {
          return
        }
        if (event.ctrlKey && event.keyCode === 13) {
          let textDom = document.getElementById('textareaContent')
          let value = '\n'
          let startPos = textDom.selectionStart         //  获取光标选中的开始位置
          let endPos = textDom.selectionEnd             //  获取光标选中的结束位置
          let content = deepClone(this.sendChatMsg.content)
          if (startPos === 0) {
            this.sendChatMsg.content = '\n' + content
          } else if (startPos === content.length) {
            this.sendChatMsg.content = content + '\n'
          } else {
            this.sendChatMsg.content = content.substring(0, startPos) + '\n' + content.substring(endPos, textDom.value.length)      //  设置换行的位置光标选中的结束位置
          }
          textDom.selectionStart = startPos + value.length
          textDom.selectionEnd = startPos + value.length
          this.$nextTick(() => {
            let newPos = startPos + 1
            textDom.setSelectionRange(newPos, newPos)
          })
        } else if (event.keyCode === 13) {
          this.handleSubmit()
        }
      },
      // 发送消息智能联想
      quickReplayAutoComplete (data) {
        let showLimit = 20
        let listNeedShow = [] // 需要显示的数据
//        let wordLast = this.wordLast // 缓存的上个单词
        let wordClone = deepClone(this.sendChatMsg.content)
        let word = wordClone.replace(/\r\n/g, '').replace(/\n/g, '').replace(/(^\s*)|(\s*$)/g, '').replace(/\\/g, '\\\\').replace(/\[/g, '\\[').replace(/\]/g, '\\]').replace(/\(/g, '\\(').replace(/\)/g, '\\)').replace(/\{/g, '\\{')
//        let regWord = new RegExp('^' + wordLast)
//        let isAddByLastWord = false // 是否是从上次单词连续输入的
//        if (wordLast && word.match(regWord)) {
//          isAddByLastWord = true
//        }
        if (word) {
          let list = [] // 用来进行匹配的数据
          let quickList = []
//          if (!this.wordLastList.length) { // 缓存的上个单词的语句的listgetAllQuickReplyList
//            this.wordLastList = []
//            this.wordLast = ''
//          }
//          if (!(isAddByLastWord && !this.wordLastList.length > 0)) { // 如果是从上次单词连续输入的，且上次单词没有匹配到结果，则不进行匹配
          list = this.$store.state.webchat.current.webchat_todo.allQuickReply.list
          if (list) {
            this.wordLast = word
            list.forEach((item) => {
              let isQuick = false
              let quickContent = item.quickContent
              let content = item.content
              if (quickContent && quickContent !== '' && word === quickContent) {
                quickList.push(quickContent)
                if (listNeedShow.length < showLimit && listNeedShow.indexOf(quickContent) < 0) {
                  listNeedShow.push({'data': content, 'flag': false, 'quickCon': quickContent})
                  isQuick = true
                }
              }
              if (!isQuick) {
                if (content && content !== '' && content.indexOf(word) > -1) {
                  if (listNeedShow.length < showLimit && listNeedShow.indexOf(content) < 0) {
                    listNeedShow.push({'data': content, 'flag': false, 'quickCon': ''})
                  }
                }
              }
            })
          }
//          }
          this.listNeedShow = listNeedShow
          if (this.listNeedShow.length) {
            this.moveAutoCompItem(word)
          } else {
            this.showSuggest = false
            this.selectIndex = -1
          }
        } else {
          this.showSuggest = false
          this.selectIndex = -1
        }
      },
      suggestListAdd (data) {
        // if (data.type === 'sys') {
        //   this.$store.dispatch('addAgentQuickReplyNum', {_id: data._id})
        // } else if (data.type === 'agent') {
        //   this.$store.dispatch('addCommonQuickReplyNum', {_id: data._id})
        // }
        this.sendChatMsg.content = data
        document.getElementsByClassName('send_msg_textarea')[0].focus()
        this.showSuggest = false
        this.selectIndex = -1
      },
      moveAutoCompItem (keyWord) {
        let moveLeft = 14
        let fontSize = ''
        if (this.chatMsgFontClass.indexOf('font') !== -1) {
          fontSize = parseInt(this.chatMsgFontClass.split('font')[1])
        } else {
          fontSize = 12
        }
        let reg = /^[\u4e00-\u9fa5]+$/
        let flag = keyWord.split('')
        if (flag.length < 40) {
          for (let j = 0; j < flag.length; j++) {
            if (!reg.test(flag[j])) {
              moveLeft += fontSize / 2
            } else {
              moveLeft += fontSize
            }
          }
        } else {
          moveLeft = 200
        }
        document.getElementsByClassName('suggest')[0].style.bottom = '30px'
        document.getElementsByClassName('suggest')[0].style.left = moveLeft + 'px'
        this.showSuggest = true
      },
      listenerFun (event) {
        let that = this
        if (document.getElementsByClassName('suggest').length) {
          that.showSuggest = false
          that.selectIndex = -1
        }
      },
      addLisiner () {
        document.addEventListener('click', this.listenerFun)
      },
      sendParseImg () {
       if (!this.parseImg.loading) {
        this.handleSubmit({}, 'image', this.parseImg.parseImgUrl)
        this.parseImg.dialog = false
       }
      },
      parseImgCancel () {
        this.sendChatMsg.content = ''
        this.parseImg.dialog = false
      },
      // 复制粘贴图片上传
      pasteImg (evnet) {
        let ele = evnet.clipboardData.items
        let that = this
        for (let i = 0; i < ele.length; ++i) {
          if (ele[i].kind === 'file' && ele[i].type.indexOf('image/') !== -1) {
            let blob = ele[i].getAsFile()
            // 微信，小程序上传传图片大小不允许超2mb
            let fileSize = true
            if ((this.chatInfo.platform === 'weixin' || this.chatInfo.platform === 'wxmini') && blob.size > (1024 * 1024 * 2)) {
              fileSize = false
            }
            if (!fileSize) {
              that.$message.error(that.$t('webchat.weixinImgUploadLimit'))
              that.uploaded.uploadImg = false
              that.uploaded.uploadImgSessionId = ''
              that.sendChatMsg.content = ''
              return
            }
            let filename = 'clipboard' + new Date().getTime() + '.png'
            let key = function () {
              let date = getCurrentDate()
              let today = new Date()
              let time = today.getTime()
              let fileName = filename
              let fileSuffix = ''
              if (fileName) {
                fileSuffix = fileName.substring(fileName.lastIndexOf('.'), fileName.length)
              }
              return 'im/' + that.webchatData.accessId + '/' + date + '/' + time + '/' + uuid.v1() + fileSuffix
            }
            that.uploaded.uploadImgSessionId = that.sessionId
            let key1 = key()
            let uploadProgress = function (up, file) {
              that.changeChatMsgScroll()
            }
            that.parseImg.dialog = true
            that.parseImg.loading = true
            let fileUploaded = function (up) {
              let domain = that.$store.state.fileDomain.cos7moorImDomain || cos7moorImDomain
              let sourceLink = domain + (that.$store.state.isUseQiniu ? up.key : up.fileKey) // 获取上传成功后的文件的Url
              if (that.uploaded.uploadImgSessionId === that.sessionId) {
                // that.sendChatMsg.content = ''
                that.parseImg.parseImgUrl = JSON.parse(JSON.stringify(sourceLink))
              }
              let textDom = document.getElementById('textareaContent')
              if (textDom) {
                textDom.blur()
              }
              that.parseImg.loading = false
            }
            if (fileSize) {
              PasteImguploadTo7moorImDomain(this.$store.state.session.user._id, 'webchatPasteImageSendBtn', blob, filename, uploadProgress, fileUploaded, key1)
            }
          }
        }
      },
      // 发送评价
      pushImCSRInfo () {
        if (this.isVideoing && this.webchatData._id === this.videoSessionid) {
          this.VideoActionTips = this.$t('videoChat.operaAfterVideo')
          return
        }
        if (this.isInviteVideo && this.webchatData._id === this.videoInviteSessionId) {
          this.VideoActionTips = this.$t('videoChat.operaAfterVideo')
          return
        }
        if (this.isScreenShareing && this.webchatData._id === this.screenShareSessionId) {
          this.VideoActionTips = this.$t('screenShare.operaAfterShare')
          return
        }
        this.$store.dispatch('getCache', {type: 'channelDic'}).then((res) => {
          let _webchatCSR = ''
          for (let i = 0; i < res.length; i++) {
            if (res[i].type === 'webchatCSR') {
              _webchatCSR = res[i].options || []
              break
            }
          }
          if (!_webchatCSR || _webchatCSR.length === 0) {
            this.$message.error(this.$t('webchat.isNullBywebchatCSR'))
            return
          } else {
            let data = {
              accessId: this.webchatData.accessId,
              content: '',
              contentType: 'text',
              displayName: this.agentName,
              exten: this.agentNum,
              im_icon: this.$store.state.session.user.im_icon || '',
              platform: this.chatInfo.platform,
              sessionId: this.webchatData._id,
              sid: this.webchatData.sid,
              status: 'deal'
            }
            this.$store.dispatch('pushImCSRInfo', data).then((res) => {})
          }
        })
      },
      scrollToBottom (scrollClassName, warpClassName) {
        this.$nextTick(function () {
          if (document.getElementsByClassName(scrollClassName).length) {
            document.getElementsByClassName(scrollClassName)[0].scrollTop = document.getElementsByClassName(warpClassName)[0].scrollHeight
          }
        })
      },
      // 复制知识库内容
      copyKmContent () {
        let content = deepClone(this.sendChatMsg.content)
        let value = deepClone(this.copySerachValue)
        this.sendChatMsg.content = content + '' + value
        document.querySelectorAll('.send_msg_textarea')[0].focus()
      },
      checkSuffix (str, suf) {
        let strRegex = '(.' + suf.split(',').join('|.') + ')$'
        let re = new RegExp(strRegex)
        if (re.test(str.toLowerCase())) {
          return true
        } else {
          return false
        }
      },
      destoryCaptureObj () {
        this.captureObj = null
        if (document.getElementById('startCaptureFrame')) {
          document.getElementById('startCaptureFrame').remove()
        }
      },
      handleClick(tab, event){
        let that = this
        let obj = this.$refs.emoticon
        if(!obj.toshow){
          obj.mainShow()
          this.$nextTick(()=>{
            // that.initUploadWebchatImg2()
          })
        }
        obj.scroll()
      },
      // 发送询中表单消息
      sendFormData(data) {
        this.handleSubmit(data, 'sessionForm', data.sessionForm.leadText)
        this.formListVisible = false
      }
    },
    beforeMount () {
      // change beforeMount position
      // add by liang.qi
      this.$_uploaders = []
      this.$_uploadWebchatImg = document.createElement('span')
      this.$_uploadWebchatImg.setAttribute('id', 'uploadWebchatImg')
      this.$_uploadWebchatImg.style.display = 'inline-block'
      this.$_uploadWebchatImg.style.position = 'absolute'
      this.$_uploadWebchatImg.style.top = '0px'
      this.$_uploadWebchatImg.style.right = '0px'
      this.$_uploadWebchatImg.style.left = '0px'
      this.$_uploadWebchatImg.style.bottom = '0px'
      this.$_uploadWebchatImg.style.zIndex = '1'

      this.$_uploadWebchatFile = document.createElement('span')
      this.$_uploadWebchatFile.setAttribute('id', 'uploadWebchatFile')
      this.$_uploadWebchatFile.style.display = 'inline-block'
      this.$_uploadWebchatFile.style.position = 'absolute'
      this.$_uploadWebchatFile.style.top = '0px'
      this.$_uploadWebchatFile.style.right = '0px'
      this.$_uploadWebchatFile.style.left = '0px'
      this.$_uploadWebchatFile.style.bottom = '0px'
      this.$_uploadWebchatFile.style.zIndex = '1'
      this.captureDom = document.createElement('iframe')
      this.captureDom.setAttribute('id', 'startCaptureFrame')
      this.captureDom.style.display = 'none'
      // add by liang.qi end
      if (contains(this.$store.state.session.user.funcIds, 'func_not_allow_lock_session')) {
        this.unlockShow = false
      }
      this.iframUrl = this.iframeMsgUrl
      this.webchatSatisfiedForbid = getCache('webchatSatisfiedForbid')
      this.fetchData()
    },
    mounted () {
      // add by liang.qi
      if (this.tabType === 'webchat_todo') {
        this.$refs.uploadWebchatImg_insert && this.$refs.uploadWebchatImg_insert.appendChild(this.$_uploadWebchatImg)
        this.$refs.uploadWebchatFile_insert && this.$refs.uploadWebchatFile_insert.appendChild(this.$_uploadWebchatFile)
        this.$refs.webchatSendMsg && this.$refs.webchatSendMsg.appendChild(this.captureDom)
      }
      let currentUser = this.$store.state.session.user.loginName + '@' + this.$store.state.session.account.name
      let inputHeight = window.localStorage.getItem(currentUser + '/webInputHeight') || 'gaodusuoxiao'
      this.changeInputHeight(inputHeight)
      // add by liang.qi end
      let extension = document.getElementById('janus-extension-installed')
      if (extension) {
        this.popover5Show = false
      }
      if (this.tabType === 'webchat_todo' && document.getElementsByClassName('send_msg_textarea')) {
//        this.getAllQuickReplay()
        this.initUploaded()
        this.addLisiner()
        if (document.getElementsByClassName('send_msg_textarea').length) {
          //document.getElementsByClassName('send_msg_textarea')[0].addEventListener('paste', this.pasteImg)
        }
        bus.$on('sendKmContent', (type, item) => {
          this.getKmContent(type, item)
        })
        bus.$on('sendRobotSearch', (type, item, human) => {
          this.sendAiAnswer(type, item, human)
        })
      }
      let exten_visible = this.$store.state.session.account.exten_visible || []
      if (exten_visible.includes(this.$store.state.session.sessionId)) {
        this.showRemoteControl = true
      }
      if (isHasFunc('func_not_add_webchat_blacklist', this.$store.state.session.user)) {
        this.isShowAddBlacklist = false
      }
      bus.$on('quickReplyHandleSubmit', (msg) => {
        this.handleSubmit({}, msg.type, msg.con)
      })
      bus.$on('onQuickReply', (msg) => {
        this.handleSubmit({}, msg.type, msg.con)
        this.showSuggest = false
        this.sendChatMsg.content= ""
      })
      bus.$on('childTabClick', () => {
        this.destoryCaptureObj()
      })
      bus.$on('iframeSendCardInfo', (msg) => {
        if (this.chatInfo.platform === 'ocpc' || this.chatInfo.platform === 'dy') {
          this.$message({
            message: this.$t('webchat.notSupportSendingMssageType'),
            type: 'warning'
          })
          return
        }
        this.handleSubmit({}, 'newCardInfo', false, false, false, msg)
      })
      bus.$on('sendShopMsg', (msg) => {
        if (msg.otherInfo) {
          delete msg.otherInfo
        }
        this.handleSubmit({}, 'cardInfo', false, false, false, false, false, msg)
      })
      bus.$on('sendOrderInfoFun', (msg) => {
        this.handleSubmit({}, 'ecommerceOrderCardInfo', false, false, false, false, false, msg)
      })
      bus.$on('withdrawReedit', (msg) => {
        let content = deepClone(this.sendChatMsg.content)
        let value = ""
        let drawMessage = msg.drawMessage
        if (msg.aiContentText) {
          drawMessage = msg.aiContentText
        }
        try {
          value = deepClone(decodeURIComponent(drawMessage))
        } catch (a) {
          value = deepClone(drawMessage)
        }
        if (value.indexOf('<7moorbr/>') > -1) {
          value = value.replace(/<7moorbr\/>/g, '\n')
        }
        this.sendChatMsg.content = content + '' + value
      })
      // 重新上传
      bus.$on('toResendMsg',(file)=>{
        this.initUploadWebchatFile()
        this.$_uploaders.forEach(uploader => {
          uploader &&
          uploader.addFile(file,'',true)
        })
      })
    },
    activated () {
      // change activated position by liang.qi
      if (this.tabType === 'webchat_todo') {
        this.$store.dispatch('getCache', {type: 'webchatAndSdkConfig'}).then((res) => {
         if(res&&res.length>0){
            let objTemp=res.filter(item=>item.accessId==this.chatInfo.accessId)
            if(objTemp&&objTemp.length>0){
              this.snsapiUserinfoFlag=objTemp[0].snsapiUserinfoFlag
            }
          }
      })
        // add by liang.qi
        this.$refs.uploadWebchatImg_insert && this.$refs.uploadWebchatImg_insert.appendChild(this.$_uploadWebchatImg)
        this.$refs.uploadWebchatFile_insert && this.$refs.uploadWebchatFile_insert.appendChild(this.$_uploadWebchatFile)
        // add by liang.qi end
        // this.getAllQuickReplay()
        this.addLisiner()
        if (document.getElementsByClassName('send_msg_textarea').length) {
          //document.getElementsByClassName('send_msg_textarea')[0].addEventListener('paste', this.pasteImg)
        }
        this.$nextTick(function () {
          if (this.$_uploaders.length === 0) {
            this.initUploaded()
          }
        })
      }
    },
    beforeDestroy () {
      this.captureObj = null
      bus.$off('sendKmContent')
      bus.$off('sendRobotSearch')
      bus.$off('quickReplyHandleSubmit')
      bus.$off('onQuickReply')
      bus.$off('childTabClick')
      bus.$off('iframeSendCardInfo')
      bus.$off('sendShopMsg')
      bus.$off('sendOrderInfoFun')
      bus.$off('withdrawReedit')
      bus.$off('toResendMsg')
      document.removeEventListener('click', this.listenerFun)
      // add by liang.qi
      if (!this.uploaded.uploadFile.flag && this.uploaded.uploadFile.progress !== 100) {
        clearTimeout(this.inter)
        this.mes && this.mes.close()
        this.mes = null
        this.$_uploaders.forEach(uploader => {
          uploader &&
          uploader.destroy &&
          uploader.destroy()
        })
      }
      // add by liang.qi end
    },
    watch: {
      // add by liang.qi
      tabType (val) {
        if (val === 'webchat_todo') {
          this.$nextTick(() => {
            this.$refs.uploadWebchatImg_insert && this.$refs.uploadWebchatImg_insert.appendChild(this.$_uploadWebchatImg)
            this.$refs.uploadWebchatFile_insert && this.$refs.uploadWebchatFile_insert.appendChild(this.$_uploadWebchatFile)
          })
        }
      },
      // add by liang.qi end
      $route (to, form) {
        this.$refs.popover7.doClose()
        this.wordLast = ''
        this.chatMsgCon.font = window.localStorage.getItem('imFontCon')
        if (!this.chatMsgCon.font) {
          this.chatMsgCon.font = 'font12'
        }
        if (!this.uploaded.uploadFile.flag && this.uploaded.uploadFile.progress !== 100) {
          this.$_uploaders.forEach(uploader => {
            uploader &&
            uploader.destroy &&
            uploader.destroy()
          })
          this.uploaded.uploadImg = false
          this.uploaded.uploadImgSessionId = ''
        }
        if (this.tabType === 'webchat_todo' && (this.chatInfo.platform !== this.$store.state.webchat.current.webchat_todo.previousSessionPlatform)) {
          this.$store.commit(types.SET_CHAT_PLATFORM, this.chatInfo.platform)
        }
        this.initUploaded()
      },
      faceVisible(val){
       if(!val) this.$refs.emoticon.reset()
      },
      'inputRandom': 'copyKmContent'
    }
  }
</script>

<style lang="stylus" scoped>
  @import "./style/webchatCon.styl"
  .icon-suoding,.icon-jiesuo
    float right
  .instead
    height 80px
    width 100%
  .blackListName
    color #595959
    font-size 12px
    cursor pointer
  .parseTitle
    font-size 14px
    color #595959
    margin-left 10px
  .parseIcon
    color #E6A23B
    font-size 20px
  .uploadingImg
    height 100%
    width 100%
    text-align center
  .parseImgBox
    text-align center
    margin-top 10px
    width 100%
    height 90%
  .parseImgBox > img
    max-height 100%
    max-width 100%
  #textareaContent::-webkit-input-placeholder
    font-size 14px
  .send_msg_form
    position relative
    padding-bottom 6px
    textarea
      width 100%
      border none
      box-sizing border-box
      resize none
  .textGradient
    background: linear-gradient(to right, #FF8F8F, #FF6161)
    -webkit-background-clip: text
    color: transparent
  .sessionFormLi
    position relative
    width 220px
    padding-left 10px
    font-size 12px
    height 28px
    line-height 28px
    &:hover
      background #ECF6FD
      color #459AE9
    p
      display inline-block
      max-width 194px
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      vertical-align middle
    span
      display none
      position absolute
      font-size 12px
      right 4px
    &:hover
      span
        display inline-block
  .descriptionBack
    background #E0E0E0
    padding 10px
  .descriptionBox
    width 200px
    text-align center
    font-size 12px
    p
      cursor default
      margin 6px 0 10px
    p:hover
      background #fff
    input
      display block
      margin 6px auto
      height 24px
      box-sizing border-box
      padding-left 6px
</style>
<style lang="stylus">
.parseImgDialog .el-dialog
  height 68%
  .el-dialog__body
    height 68%
.emoji
  padding 0
  border none
  .el-tabs__content
    height 208px
    position relative
    padding 0px
  .el-tabs__item
    width 60px
    height 42px
    text-align center
  .el-tabs__nav-scroll
    border none
    background #F7F7F7
  .el-tabs__header
    margin 0!important
  #tab-first
    padding-top 2px!important
    border none
.mypopover
  padding 5px 0
.mypopover p
  cursor pointer
.mypopover p:hover
  background rgba(231,246,253,1)
.mydropdown
  display inline
.correct-btn
  font-size 12px
  font-size 12px
  height 22px
  line-height 22px
  padding 0 14px
.correct-btn-box
  text-align right
  padding-top 8px
</style>

